import React, { useState } from "react";

// todo hooks只能给函数组件用
// todo hooks可以在不增加组件树层级的情况下增加组件功能
// todo hooks可以增加代码可读性，将功能代码聚合，方便阅读维护， 复用
// todo hooks只能在函数组件的顶层调用

// todo useState是让函数组件可以定义自己的state
// todo useState调用会返回一个数组, 分别是变量和改变变量的方法
// todo useState需要接收一个参数，是变量的初始值
// todo useState改变数据是异步的

const App = () => {
  const [count, setCount] = useState(5);
  // const [num, setNum] = useState(100);

  const fn = () => {
    // setCount(10);
    setCount((v) => v + 1);
  };

  return (
    <>
      <h2>useState</h2>
      <span>{count}</span>
      <button onClick={fn}>btn</button>
      {/* <p>{num}</p> */}
    </>
  );
};

export default App;
